import React from 'react';
import PropTypes from 'prop-types';
import cn from 'classnames';
import s from './bar.module.css';

export default function Bar({ className, precent, color, bgColor }) {
	return (
		<div
			className={cn(className, s.bar)}
			title={precent}
			style={{ backgroundColor: bgColor }}
		>
			<div
				className={s.innerBar}
				style={{ width: precent, backgroundColor: color }}
			/>
		</div>
	);
}

Bar.propTypes = {
	className: PropTypes.string,
	precent: PropTypes.string.isRequired,
	color: PropTypes.string,
	bgColor: PropTypes.string,
};

Bar.defaultProps = {
	className: s.bar,
};
